<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {{ message }}
  {{ message }}
  {{ message }}

  {{ name }}
</div>
<script>
  const obj = {
    message: 'aaa',
    name: 'bbb'
  }

  Object.keys(obj).forEach(key => {
    let value = obj[key]

    Object.defineProperty(obj, key, {
      set(newValue) {
        console.log('监听' + key + '改变');
        value = newValue
        dep.notify()
      },
      get() {
        console.log('获取' + key + '对应的值');
        return value
      }
    })
  })
  //发布者
  class  Dep {
    constructor() {
      this.subs = []
    }
    addSub(wather) {
      this.subs.push(wather)
    }
    notify() {
      this.subs.forEach(item => {
        item.update()
      })
    }
  }
  //订阅者
  class Watcher {
    constructor(name) {
      this.message = name;
    }
    update() {
      console.log(this.message + 'update');
    }
  }

  const dep = new Dep()

  const w1 = new Watcher('张三')
  dep.addSub(w1)

  const w2 = new Watcher('李四')
  dep.addSub(w2)

  const w3 = new Watcher('王五')
  dep.addSub(w3)

</script>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'aaa',
      name: 'bbb'
    }
  })
</script>
</body>
</html>
<script>
  import Scroll from "./src/components/common/scroll/Scroll";

  export default {
    components: {Scroll}
  }
</script>
